<template>

    <div>
        <div class="header-sum-card">
            <Row :gutter="10" class="mt10">
                <Col class="mb10" :lg="20" :md="20" :sm="24" :xs="24">
                    <div class="blog-content">
                        <Card>
                            <template>
                                <li style="list-style: none">
                                    <Avatar :src="author.avatar"></Avatar>
                                    {{author.name}}
                                    <Icon type="md-eye"/>
                                    {{blogData.views}}

                                    <Icon type="ios-calendar"/>
                                    {{dateFilter(blogData.updateTime)}}
                                </li>
                                <Tag slot="extra" size="large" color="success">{{this.blogData.flag}}</Tag>
                            </template>
                        </Card>
                        <Card>
                            <img :src="blogData.firstImageUrl" alt="" width="100%">
                            <div style="text-align: center"><h2>{{blogData.title}}</h2></div>
                            <div v-html="blogData.html"></div>
                        </Card>
                        <Card title="评论区">
                            <Comment :commentList="commentList" :blogId="blogId" @on-comment="showCommentById"></Comment>
                        </Card>
                    </div>
                </Col>
            </Row>
        </div>
        <template>
            <!--            返回顶部组件-->
            <BackTop>
                <div style="background-color:#76A09D;border-radius: 50%">
                    <Icon type="md-arrow-round-up"/>
                </div>
            </BackTop>
        </template>
    </div>

</template>
<script>
    import Comment from '../views/comment/Comment'

    export default {


        components: {
            Comment,
        },
        data() {
            return {

                name: 'ArticleComment',
                // size: 40,
                author: {
                    avatar: '',
                    name: '',
                },
                //博客详细数据
                blogData: {},
                //评论信息数组
                commentList: [],
                //博客id
                blogId:Number,

            }
        },
        created() {
            this.blogId = this.$route.query.id;
            this.showBlogById(this.blogId)
            this.showCommentById(this.blogId)

        },


        methods: {
            //根据id查询博客具体内容
            async showBlogById(id) {
                const {data: result} = await this.$http.get("showBlogById/" + id)
                if (result.code === 200) {
                    this.blogData = result.data.blog
                    this.author = result.data.user
                    this.$Message.success(result.message)
                } else {
                    this.$Message.success(result.message)
                }
            },
            //根据id查询该博客的评论信息
            async showCommentById(id) {
                const {data: result} = await this.$http.get("getListByBlogId/" + id)
                if (result.code === 200) {
                    this.commentList = result.data
                } else {
                    this.$Message.success(result.message)
                }
            },
            //格式化时间的方法
            dateFilter: function (input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month = d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
                var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
                var hour = d.getHours() < 10 ? "0" + d.getHours() : "" + d.getHours();
                var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes();
                var seconds = d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds();
                return (year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds);
            },

        }


    }
</script>
<!--这里设置css样式不能只在该页面显示-->
<style lang="less">
    .mt10 {
        margin-top: 10px;
        /*设置最外层页面的外边距为0*/
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .tc {
        text-align: center
    }

    /*改变博客列表底部的author seecount等位置大小*/
    .ivu-list-vertical .ivu-list-item-action > li {
        padding: 0 5px !important;
    }

    /*设置card的内边距*/

    .header-sum-card {
        font-family: 幼圆;

        span.num {
            font-size: 30px;
        }

    }

    .header-sum-card {
        font-family: 幼圆;

        span.num {
            font-size: 30px;
        }

    }

    .blog-content {
        word-wrap: break-word;
        /*overflow: hidden;*/

        img {
            /*overflow-y: scroll;*/
            width: 100% !important;
        }

        /*设置code标签中的内容超除上层容器的样式*/

        pre {
            overflow-x: auto;
        }

    }
</style>
